import React,{Component} from "react";
import {
    Button,
    Table,
    Tag,
    Modal,
    Form,
    Input,
    message,
    Switch,
    DatePicker
}from "antd"
import {EditOutlined,DeleteOutlined,UserOutlined} from "@ant-design/icons"
import {axios} from "&/axios"
import {observer} from "mobx-react"
import datamobx from "*/mobx/data"
import moment from "moment"
import _default from "antd/lib/time-picker";
moment.locale("zh-cn");
const {RangePicker}=DatePicker;
@observer
 class Temperature extends Component{
    state={
        visible:false,
        updatevisible:false,
        updatedata:null,
        // disabled:false,
        columns:[
            {
                title:"序号",
                render:(text,recode,index)=>{
                    return index+1;
                }
            },
            {
                title:"体温值",
                dataIndex:"tiwen",
                key:"tiwen"
            },
            {
                title:"是否正常",
                render:(text)=>{
                    var color=text.flag?"green":"red";
                return <Tag color={color}>{ text.flag?"正常":"发烧"}</Tag>
                }
            },
            {
                title:"是否核酸(检测)",
                render:(text)=>{

                    return <Switch disabled={text.isTest} size="small" onChange={(checked)=>this.handleChangeIsTest(checked,text._id)} checked={text.isTest} />
                }
            },
            {
                title:"日期",
                render:(text)=>{
                return <p>{moment(text.time).format("MM/DD,HH:mm:ss")}</p>
                }
            },
            {
                title:"操作",
                key:"x",
                render:(text)=>{
                    return(
                        <div>

                            <Button type="primary" size="small" icon={<EditOutlined />} onClick={()=>this.showUpdateModal(text)}>修改</Button>
                            &nbsp;&nbsp;&nbsp;
                            <Button type="danger" size="small" icon={<DeleteOutlined /> } onClick={()=>this.handleDel(text._id)}>删除</Button>
                        </div>
                    )
                }
            }
        ]
    }
    handleChangeIsTest=(checked,_id)=>{
        axios.post("/api/udpateistest",{
            _id,
            checked
        }).then(res=>{
            if(res.data.type){
                var tiwenlist=datamobx.tiwenlist.map(item=>{
                    if(item._id==_id){
                        item={...item,isTest:checked}
                        
                    }
                    return item
                })
                datamobx.getTiWenListSync(tiwenlist)
               
            }
            
        })
    }
    showUpdateModal=(item)=>{
        this.setState({
            updatevisible:true,
            updatedata:item
        })
        setTimeout(()=>{
            this.refs.updateform&&this.refs.updateform.setFieldsValue({
                tiwen:item.tiwen
            })
        },100);
    }
    handleDel=(_id)=>{
        axios.post("/api/deltiwenlogone",{
            _id,
           
        }).then(res=>{
            if(res.data.type){
                var tiwenlist=datamobx.tiwenlist.filter(item=>item._id!==_id)
                datamobx.getTiWenListSync(tiwenlist)
            }
        })
    }
    componentDidMount(){
        if(!datamobx.tiwenlist){
            axios.post("/api/findtiwenlist")
            .then(res=>{
                if(res.data.type){
                    datamobx.getTiWenListSync(res.data.result);
                }
            })
        }
    }
    handleAddTiwen=()=>{
        this.refs.tiwenForm.validateFields()
        .then(values=>{
            axios.post("/api/addtiwenlog",{
                ...values,
                flag:values.tiwen<37.0
            }).then(res=>{
                if(res.data.type){
                    this.refs.tiwenForm.resetFields()
                    datamobx.getTiWenListSync(res.data.result)
                }
                this.setState({
                    visible:false
                })
            }).catch(err=>{
                this.setState({
                    visible:false
                })
            })
        }).catch(err=>{
            message.error("请完善在提交")
        })
    }
    handleonChange=()=>{

    }
    handleonOk=(value)=>{
        var startTime=value[0]._d;
        var endTime = value[1]?value[1]._d:new Date();
        
        axios.post("/api/findtiwenlogtime",{
            startTime,
            endTime
        }).then(res=>{
            if(res.data.type){
                datamobx.getTiWenListSync(res.data.result)
            }
        })
    }
    handleupdateTiwen=()=>{
        this.refs.updateform.validateFields()
        .then(values=>{
            axios.post("/api/changetiwenlog",{
                _id:this.state.updatedata._id,
                ...values,
                flag:values.tiwen<37.0
            }).then(res=>{
                if(res.data.type){
                    this.setState({
                        updatevisible:false
                    })
                    datamobx.getTiWenListSync(res.data.result)
                }
            })
        }).catch(err=>{
            message.error("请完善在提交")
        })
    }
    render(){
        return(
            <div>
                <h2>
                    我的体温记录
                </h2>
                <Button type="danger" onClick={()=>this.setState({visible:true})}>添加体温记录</Button>
                <div style={{marginTop:20}}>
                    <RangePicker 
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={this.handleonChange}
                        onOk={this.handleonOk}
                    />
                </div>
                <Table
                    dataSource={datamobx.tiwenlist}
                    columns={this.state.columns}
                    rowKey={
                        (item)=>(item._id)
                    }
                    style={{marginTop:20}}
                    pagination={{pageSize:6}}
                >

                </Table>
                <Modal
                    title="添加记录"
                    visible={this.state.visible}
                    onOk={this.handleAddTiwen}
                    onCancel={()=>this.setState({visible:false})}
                    okText="确认"
                    cancelText="取消"
                >
                    <Form
                        className="form-box"
                        // {...layout}
                        // layout="vertical" // 垂直排列
                        name="basic"
                        ref="tiwenForm"
                        
                    >
                        <Form.Item
                        label="体温"
                        name="tiwen"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的体温数值!',
                            },
                            {
                                pattern: /^((3[5-9])|40)\.\d$/,
                                
                                message:"请输入正确范围的体温数值"
                            }
                        ]}
                        >
                        <Input 
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="请输入体温数值"
                        />
                        </Form.Item>
                    </Form>
                </Modal>
                <Modal
                    title="修改体温记录"
                    visible={this.state.updatevisible}
                    onOk={this.handleupdateTiwen}
                    onCancel={()=>this.setState({updatevisible:false})}
                    okText="确认修改"
                    cancelText="取消"
                >
                    <Form
                        className="form-box"
                        // {...layout}
                        // layout="vertical" // 垂直排列
                        name="basic"
                        ref="updateform"
                        width="200px"
                    >
                        <Form.Item
                        label="体温"
                        name="tiwen"
                        rules={[
                            {
                                required: true,
                                message: '请输入你的体温数值!',
                            },
                            {
                                pattern: /^((3[5-9])|40)\.\d$/,
                                // pattern:/((^3[5-9])(\.\d+)?|^(40)(\.0+)?)℃$/,
                                message:"请输入正确范围的体温数值"
                            }
                        ]}
                        >
                        <Input 
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="请输入体温数值"
                        />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
export default Temperature